<template>
  <div class="employees-container">
    <!-- 头部 -->
    <el-card class="head-card">
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
          <div class="info-box">
            <i class="el-icon-info" />
            <span>共16条记录</span>
          </div>
        </el-col>
        <el-col class="right-col" :span="6">
          <el-button
            v-if="checkMenuPermission('import')"
            type="warning"
            @click="toImport"
          >导入</el-button>
          <el-button type="danger" @click="exportHandler">导出</el-button>
          <el-button type="primary" @click="addPuls">新增员工</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 底部 -->
    <el-card class="bottom-card">
      <!-- table -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="150" />
        <el-table-column prop="username" sortable label="姓名" width="150" />
        <el-table-column prop="workNumber" sortable label="工号" width="150" />
        <el-table-column
          prop="formOfEmployment"
          sortable
          label="聘用形式"
          width="150"
          :formatter="formatter"
        />
        <el-table-column
          prop="departmentName"
          sortable
          label="部门"
          width="150"
        />
        <el-table-column
          prop="timeOfEntry"
          sortable
          label="入职时间"
          width="150"
        >
          <template #default="{row}">
            {{ row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <!-- 这几个字段没有 -->
        <el-table-column sortable label="账户状态" width="150" />
        <el-table-column sortable label="是否在职" width="150" />
        <!-- fixed="right"  固定在右边 -->
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{row}">
            <el-button
              v-if="checkMenuPermission('detail')"
              type="text"
              size="small"
              @click="toDetail(row.id)"
            >查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button
              type="text"
              size="small"
              @click="showRole(row.id)"
            >角色</el-button>
            <el-button
              v-if="checkPointPermission('employees-delete')"
              type="text"
              size="small"
              @click="delEmployee(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="pagesize"
        layout="prev, pager, next"
        :total="total"
      />
    </el-card>
    <!-- 弹框 -->
    <employeeDialog ref="dialog" />
    <!-- 角色弹框 -->
    <roleDialot ref="roleDialot" />
  </div>
</template>

<script>
// 接口
import { getEmployees } from '../../api/employees'
import { delEmployeeById } from '../../api/employees'
// 组件
import employeeDialog from './components/employeeDialog'
import roleDialot from './components/roleDialot.vue'
// 导入枚举
import Employees from '../../api/constant/employees'
// 导入混入
import mixins from '../../mimixs'
export default {
  name: 'Employees',
  // 注册
  components: {
    employeeDialog,
    roleDialot
  },
  mixins: [mixins],
  data() {
    return {
      tableData: [], // table的数据
      total: 0, // 总条数
      page: 1, // 页码
      pagesize: 5 // 页容量
    }
  },
  // 侦听器
  watch: {
    // 页码
    page(value) {
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 角色弹框
    showRole(id) {
      this.$refs.roleDialot.getInfoAndShow(id)
    },
    // 去查看页面
    toDetail(id) {
      this.$router.push({ name: 'detail', params: { id }})
    },
    // 导出
    exportHandler() {
      // 导入模块
      import('@/vendor/Export2Excel').then(excel => {
        // 表头   任何一个对象的 所有key
        const tHeader = Object.keys(this.tableData[0])
        // 数据 二维数组
        const data = []
        this.tableData.forEach(item => {
          // 保存每一个对象数据的狐族
          const _arr = []
          // item 是每一个对象
          Object.keys(item).forEach(key => {
            // item 是每一项的属性名   key是值
            _arr.push(item[key])
          })
          // 处理完毕
          data.push(_arr)
        })
        // 成功
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 去导入页面
    toImport() {
      this.$router.push({ path: '/import' })
    },
    // 删除员工
    async delEmployee(id) {
      // console.log('id', id)
      await delEmployeeById(id)
      this.$message.success('删除成功')
      if (this.pagesize.length === 1 && this.page > 1) {
        this.page--
      }
      this.getData()
    },
    // 新增弹框
    addPuls() {
      this.$refs.dialog.visible = true
    },
    // 自定义table的数据渲染
    formatter(row) {
      // find 返回的是满足条件的元素  第一个
      const res = Employees.hireType.find(v => {
        return v.id === +row.formOfEmployment
      })
      // console.log('res:', res)
      return res.value
    },
    // 获取员工列表
    async getData() {
      const res = await getEmployees({ page: this.page, size: this.pagesize })
      // console.log(res)
      this.tableData = res.rows
      this.total = res.total
    }
  }
}
</script>

<style lang="scss">
.employees-container {
  padding: 20px;
  // 头部
  .head-card {
    .right-col {
      text-align: right;
    }
    .info-box {
      display: inline-block;
      height: 100%;
      border: 1px solid #91d5ff;
      border-radius: 4px;
      line-height: 40px;
      padding: 2px 10px;
      background-color: #e6f7ff;
      i {
        margin-right: 5px;
        color: #409eff;
        font-size: 20px;
      }
      span {
        font-size: 18px;
      }
    }
  }
  // 底部
  .bottom-card {
    margin-top: 20px;
    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
